/**
 * 用户登录
 */
import React, { Component } from 'react';
import { hashHistory } from 'react-router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Button, Form, Input, Checkbox, message, Icon } from 'antd';
import logoImg from '../../assets/images/logo.png';
import './index.less';

import { actionUserLogin } from '../../actions';

const createForm = Form.create;
const FormItem = Form.Item;

class UserLogin extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    componentDidUpdate(){
        const { isLogined, token } = this.props;
        if(isLogined) {
            sessionStorage.setItem('token',token);            
            let url = '/home';
            message.success('登录成功');
            hashHistory.push(url); 
        }else{
            if(!this.props.location.pathname.includes('userLogin')) {
                hashHistory.push("/userLogin");
            }
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const _USERNAME = values.username;
                const _PASSWORD = values.password;
                const hide = message.loading('登录中...', 0);
                setTimeout(hide, 0);
                this.props.fetchLogin(_USERNAME,_PASSWORD)
            }
        });
    }

    // TODO 改为 didmount ，不然一直报警告 setState warning
    componentDidMount() {
        // 登录状态为 未登录 0
        sessionStorage.setItem('loginState', '0');
    }


    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div style={{overflow: 'hidden'}}>
                <div className="login-main">
                    <div className="login-wrap text-align-center">
                        <img src={logoImg} alt=""/>
                    </div>
                    <div className="login-cnt">
                        <div>
                            <Form onSubmit={this.handleSubmit} className="login-form">
                                <FormItem label="">
                                    {getFieldDecorator('username', {
                                        rules: [{
                                            required: true,
                                            message: '请输入账户名',
                                            type: 'string'
                                        }, {
                                            message: '用户名不能超过30个字',
                                            max: 30,
                                        }],
                                    })(
                                        <Input type="text" prefix={<Icon type="user" style={{fontSize: 13}}/>}
                                                placeholder="请输入账户名"/>
                                    )}
                                </FormItem>
                                <FormItem label="">
                                    {getFieldDecorator('password', {
                                        rules: [{
                                            required: true,
                                            message: '请输入密码',
                                            type: 'string'
                                        }, {
                                            message: '密码不能超过30个字',
                                            max: 30,
                                        }],
                                    })(
                                        <Input type="password" prefix={<Icon type="lock" style={{fontSize: 13}}/>}
                                                placeholder="请输入密码"/>
                                    )}
                                </FormItem>
                                <FormItem>
                                    {getFieldDecorator('remember', {
                                        valuePropName: 'checked',
                                        initialValue: true,
                                    })(
                                        <Checkbox>记住用户名</Checkbox>
                                    )}
                                </FormItem>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    登录
                                </Button>
                            </Form>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect(// mapStateToProps 获取Reducer数据
    state => ({
        username: state.userLoginReducer.username,
        message: state.userLoginReducer.message,
        loading: state.userLoginReducer.loading,
        isLogined: state.userLoginReducer.isLogined,
        auth: state.userLoginReducer.auth,
        token: state.userLoginReducer.token,
    }),
    // mapDispatchToProps 调用Action方法
    dispatch => bindActionCreators({
        fetchLogin: actionUserLogin.fetchLogin
    },dispatch))(createForm()(UserLogin))